<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			.box1{
				width: 6.25rem;
				height: 6.25rem;
				background-color: #DEDEDE;
			}
			.box2{
				width: 12.5rem;
				height: 12.5rem;
				background-color: #ded484;
			}
		</style>
		<button>按钮</button>
		<div class="box1" id="box1"></div>
		<script>
			var btn = document.getElementsByTagName("button")[0];
			var box1 = document.getElementById("box1");
			btn.onclick = function(){
				// 修改一行代码，改变多个样式
				box1.className = "box2";
			}
			
			// obj:元素。cn：要添加的类名
			function toggleClass(obj, cn){
				if(hasClass(obj, cn)){
					removeClass(obj, cn)
				}else{
					addClass(obj, cn)
				}
			}
			
			// obj:元素。cn：要添加的类名
			function removeClass(obj, cn){
				var reg = new RegExp("\\b" + cn + "\\b");
				obj.className = obj.className.replace(reg, "");
			}
			
			// 向一个元素添加一个新的类
			// obj:元素。cn：要添加的类名
			function addClass(obj, cn){
				if(!hasClass(obj, cn)){
					obj.className += cn;
				}
				
			}
			
			// 判断一个元素中是否含有制定的class属性值
			// obj:元素。cn：要查询的类名
			function hasClass(obj, cn){
				var name = obj.className;
				// 正则表达式 \b  标识单词边界
				var reg = new RegExp("\\b" + cn + "\\b");
				return reg.test(name);
			}
		</script>
	</body>
</html>
